$panelWidth: 300px;
$btnWidth: 40px;
$maxLeft: $btnWidth - $panelWidth;

.panel {
  position: fixed;
  left: -$panelWidth;
  top: 0;
  bottom: 0;
  margin: auto;
  width: $panelWidth;
  z-index: 99;
  background: #fff;
  opacity: 0.7;
  transition: transform 0.3s, opacity 0.3s;
  will-change: transform;

  .toggle-btn {
    position: absolute;
    width: $btnWidth;
    top: 0;
    bottom: 0;
    margin: auto;
    margin-left: -1px;
    left: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fff;
    box-shadow: 7px 0px 10px rgba(0, 0, 0, 0.1);

    .iconfont {
      transform: rotate(180deg);
      font-size: 20px;
    }
  }

  &.expand {
    opacity: 1;
    transform: translateX($panelWidth) !important;

    .iconfont {
      transform: rotate(0deg);
    }
  }
}

@media screen and (max-width: 1000px) {
  .panel {
    .toggle-btn {
      width: 24px;
      height: $btnWidth;
    }

    &.expand .toggle-btn {
      width: $btnWidth;
      height: 100%;
      top: 0;
    }
  }
}

@media (hover: hover) { 
  .panel:hover {
    opacity: 1;
    transform: translateX(10px);
  }
}
